﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>TreeView - Overview</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/jquery.integralui.treeview.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-blue.css" />
    <script type="text/javascript" src="../../../external/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../../external/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="../../../external/jquery.ui.widget.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.integralui.widget.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.integralui.treeview.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var $tree = $('#treeview').treeview();
        });
    </script>
    <style type="text/css">
        .feature-content
        {
	        width: 700px;
        }
        .control-panel
        {
	        width: 250px;
        }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span class="product-name">IntegralUI</span> Studio <span class="product-platform">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content">
        <div class="feature">
	        <h2 class="feature-title">TreeView / Overview</h2>
	        <div class="feature-content">
                <div id="treeview" class="widget">
                    <ul>
                        <li><span class="icons books" data-element="icon"></span><span>Books</span>
                            <ul>
                                <li><span>Art</span></li>
                                <li><span class="icons business" data-element="icon"></span><span>Business</span>
                                    <ul>
                                        <li><span>Economics</span></li>
                                        <li data-expanded=false><span class="icons chart" data-element="icon"></span><span>Investing</span>
                                             <ul>
                                                <li><span>Bonds</span></li>
                                                <li><span>Options</span></li>
                                                <li><span>Stocks</span></li>
                                            </ul>
                                        </li>
                                        <li><span>Management</span></li>
                                        <li><span>Small Business</span></li>
                                    </ul>
                                </li>
                                <li><span class="icons health" data-element="icon"></span><span>Health</span></li>
                                <li><span>Literature</span></li>
                                <li data-expanded=false><span class="icons science" data-element="icon"></span><span>Science</span>
                                    <ul>
                                        <li><span>Astronomy</span></li>
                                        <li><span>Mathematics</span></li>
                                        <li><span>Evolution</span></li>
                                        <li><span>Nature</span></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><span>Computers</span></li>
                        <li data-expanded=false><span>Electronics</span>
                            <ul>
                                <li><span>Camera</span></li>
                                <li><span>Cell Phones</span></li>
                                <li><span>Video Game Consoles</span></li>
                            </ul>
                        </li>
                        <li data-expanded=false><span class="icons music" data-element="icon"></span><span>Music</span>
                            <ul>
                                <li><span>Blues</span></li>
                                <li><span>Classic Rock</span></li>
                                <li><span>Pop</span></li>
                                <li><span>Jazz</span></li>
                            </ul>
                        </li>
                        <li><span class="icons app" data-element="icon"></span><span>Software</span>
                            <ul>
                                <li><span>Games</span></li>
                                <li><span>Operating Systems</span></li>
                                <li><span>Network &amp; Servers</span></li>
                                <li><span>Security</span></li>
                            </ul>
                        </li>
                        <li data-expanded=false><span>Sports</span>
                             <ul>
                                <li><span>Baseball</span></li>
                                <li><span>Martial Arts</span></li>
                                <li><span>Running</span></li>
                                <li data-expanded=false><span>Tennis</span>
                                    <ul>
                                        <li><span>Accessories</span></li>
                                        <li><span>Balls</span></li>
                                        <li><span>Racquets</span></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><span>Video Games</span></li>
                        <li><span class="icons time" data-element="icon"></span><span>Watches</span></li>
                    </ul>
                </div>
                <div class="control-panel">
                    <h3>Sample List:</h3>
                    <ul class="feature-list">
                        <li><a href="add-remove.html">Add/Remove</a></li>
                        <li><a href="drag-drop.html">Drag-Drop</a></li>
                        <li><a href="events.html">Events</a></li>
                        <li><a href="fast-load.html">Fast Load</a></li>
                        <li><a href="icons.html">Icons</a></li>
                        <li><a href="local-data.html">Local Data Binding</a></li>
                        <li><a href="http://www.lidorsystems.com/products/jquery/studio/samples/treeview/remote-data-binding.aspx">Remote Data Binding</a> (online)</li>
                        <li><a href="rtl.html">Right to Left</a></li>
                        <li><a href="status-icons.html">Status Icons</a></li>
                    </ul>
                </div>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>IntegralUI TreeView is a high performance light-weight widget which alows you to create and modify hierarchical structures on the fly. You can quickly load your data locally, remotely, or on demand. It has multiple methods optimized to quickly update the tree structure and current view.</p>
                    <p><span class="initial-space"></span>Using links in right panel, you can check out different features of TreeView widget.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
